<template>
	<div :class="['travelmenus','swiper',{'defaultUl':show}]">
		<ul class="swiper-wrapper">
			<li :class="['swiper-slide',{'openshow':i==open}]" v-for="(it,i) in menus" :key="it.type" @click="open=i;this.$store.commit('gettype',it.type)">{{it.typeName}}</li>
		</ul>
	</div>
</template>

<script>
	import {onMounted} from 'vue'
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name:'TravelTop',
		data(){
			return{
				menus:[],
				show:false,
				swiperMenus:[],
				open:0
			}
		},
		created() {
			this.GetMenus()
		},
		methods:{
			fiexMenus(){
				let hide=window.pageYOffset||document.documentElement.scrollTop
				hide>=1900?(this.show=true):(this.show=false)
			},
			GetMenus(){
				this.axios.get('https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=93').then((res)=>{
					res.data.data.flowTabList.forEach((it,i)=>{
						let obj={
							type:it.type,
							typeName:it.typeName
						}
						this.menus.push(obj)
					})
					
				}).catch((error)=>{
					console.log(error)
				})
			},
			MenusSwiper(){
				this.swiperMenus=new Swiper('.travelmenus',{
					slidesPerView:6.5,
					observer:true,
					observeParents:true,
				})
			}
		},
		mounted() {
			let timer
			let flag=true
			window.addEventListener('scroll',()=>{
				if (flag) {
					this.fiexMenus()
				}
				flag=false
				clearTimeout(timer)
				timer=setTimeout(()=>{flag=true},15)
			},true)
			this.MenusSwiper()
		}
	}
</script>

<style scoped>
	.travelmenus{
		height: 1rem;
		background: white;
		color: #000000;
	}
	.travelmenus ul{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.travelmenus ul li{
		width: 1.5rem;
		text-align: center;
		height: 1rem;
		line-height: 0.8rem;
		font-size: 0.35rem;
	}
	.travelmenus .openshow{
		background: url(../../../../public/img/travelmenus.png) center center;
		background-size: 75% 100% ;
		background-repeat:no-repeat;
		font-weight: bold;
	}
	.defaultUl{
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
</style>
